<template>
<div class="course-item">
  <img :src="course.course_image" alt="" class="course-item-img">
  <ul class="course-item-info">
    <li class="top">{{course.course_name}}</li>
    <li class="middle">有效时间：{{course.start_time + ' 至 ' + course.end_time}}</li>
    <li class="bottom">
      <div class="bottom-item">讲师：{{course.account_name}}</div>
      <div class="bottom-item">语言类型：{{course.programming_language}}</div>
      <div class="bottom-item">人数：{{course.number}}</div>
      <template v-if="templateType == 0 && isTeacher">
        <a href="javascript:void(0)" class="bottom-item btn" @click="delCourse(course)">删除课程</a>
        <router-link :to="{path: '/user/managestu/'+course.id}" class="bottom-item btn">
            成员管理
            <span class="btn-indicator" v-if="course.apply_number>0">{{course.apply_number}}</span>
        </router-link>
      </template>
      <template v-if="templateType == 0 && !isTeacher">
        <a href="javascript:void(0)" class="bottom-item btn exit-btn" @click="exitCourse(course)">退出课程</a>
      </template>
      <template v-if="templateType == 1">
        <a href="javascript:void(0)" class="bottom-item btn exit-btn" @click="joinCourse(course)">申请加入</a>
      </template>
    </li>
  </ul>
</div>
</template>
<script>
import { delCourse, manaCourse } from '@/utils/api'

export default {
  name: 'CourseItem',
  props: {
    course: {
      type: Object,
      default: function () {
        return {}
      }
    },
    templateType: {
      type: Number,
      default: function () {
        return 0
      }
    }
  },
  computed: {
    isTeacher () {
      return this.$store.getters.isTeacher
    },
    userInfo () {
      return this.$store.state.userInfo
    },
    isLogin () {
      return this.userInfo ? 1 : 0
    }
  },
  methods: {
    async delCourse (item) {
      let res = await this.$confirm('删除课程后将不可恢复！！！', '警告', {
        type: 'warning'
      })
      if (res === 'confirm') {
        let res = await delCourse({course_id: item.id, status: 0})
        if (res.error === '10') {
          if (this.$route.name === 'mycourse') {
            this.$router.go(0)
          } else {
            this.$router.replace('/user/mycourse')
          }
        } else {
          this.$notify({
            title: '删除课程失败',
            message: res.result,
            type: 'error'
          })
        }
      }
    },
    async exitCourse (item) {
      let res = await this.$confirm('确认退出课程！！！', '警告', {
        type: 'warning'
      })
      if (res === 'confirm') {
        let res = await manaCourse({ account_id: [this.userInfo.id], course_id: item.id, status: '2' })
        if (res.error === '10') {
          this.$notify({
            title: '已经退出',
            type: 'success'
          })
          this.$router.go(0)
        } else {
          this.$notify({
            title: '退出失败',
            message: res.result,
            type: 'error'
          })
        }
      }
    },
    async joinCourse (item) {
      if (!this.isLogin) {
        let res = await this.$confirm('你还没登陆呢！', '警告', {
          type: 'warning'
        })
        if (res === 'confirm') {
          this.$router.push('/login')
        }
      } else {
        let res = await manaCourse({ account_id: [this.userInfo.id], course_id: item.id, status: '3' })
        if (res.error === '10') {
          this.$notify({
            title: '申请已提交',
            type: 'success'
          })
        } else {
          this.$notify({
            title: '申请失败',
            message: res.result,
            type: 'error'
          })
        }
      }
    }
  },
  mounted () {
    console.log(this.course)
  }
}
</script>

<style lang="less">
.course-item {
  height: 220px;
  display: flex;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;
  border-bottom: 1px solid #bbb;
}

.course-item-info {
  height: 100%;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.course-item .bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  @media screen and (max-width: 768px) {
    justify-content: flex-start;
    line-height: 32px;
  }
}

.course-item .bottom-item {
  margin-right: 30px;
  white-space: nowrap;
}

.course-item .bottom-item.btn {
  padding: 5px 15px;
  margin-right: 15px;
  border: none;
  outline: none;
  background: #35a9e3;
  color: #fff;
  position: relative;
}
.course-item .bottom-item.btn.exit-btn {
  background: #ee3c3c;
}

.course-item .btn-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  position: absolute;
  top: -8px;
  right: -8px;
  background: #f00;
}
</style>
